<style rel="stylesheet/scss" lang="scss" scoped>
    .f-cation {
        flex: 2;
        display: flex;
        height: 80%;
        padding: 0 5px 0;
        margin: 0 5px;
        border: 1px solid #e5e5e5;
        flex-direction: column;
        margin-top: 10px;
        .f-cation_btn {
            width: 100%;
            height: 40px;
            color: #fff;
            display: flex;
            line-height: 40px;
            padding-left: 10px;
            cursor: pointer;
            background: #409EFF;
            span {
                flex: 1;
                text-align: center;
            }
        }
        .ta {
            flex: 1;
            width: 100%;
            height: 500px;
            overflow: auto;
        }
        .text-s {
            color: #409EFF;
            margin: 0 10px;
            cursor: pointer;
        }
        .text-red {
            cursor: pointer;
        }
		.box-flex{
			display: flex;
			align-items: center;
		}
		.sp-w-50{
			width: 100px;
			line-height: 40px;
		}
		.text-not{
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color: #666;
		}
    }
</style>
<template>
    <div class="f-cation">
        <p class="f-cation_btn">
            <font @click="addCat">新增+</font>
            <span>二级品类属性</span>
        </p>
        <div class="ta">
            <template v-if="list && list.length>0">
                <el-table :data="list" stripe style="width: 100%">
                    <el-table-column prop="propertyName" label="属性" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="groupName" label="所属组" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="propertyType" label="所属类型" width="180" align="center">
						<template slot-scope="scope">
							{{scope.row.propertyType == 'TEXT' ? '文本': scope.row.propertyType == 'URL' ? '文本链接':scope.row.propertyType == 'IMAGE' ? '纯图片': '图片链接'}}
						</template>
                    </el-table-column>
                    <el-table-column prop="sort"  label="顺序号" align="center" width="80"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <span class="text-s" @click="editFn(scope.row)">编辑</span>
                            <span class="text-red" @click="deleteFn(scope.row)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
			<div v-else class="text-not">暂无数据</div>
        </div>
        <el-dialog title="新增属性" :visible.sync="centerDialogVisible" width="45%" center>
            <el-row class="p-all-20 ">
                <el-col :span="20" class="box-flex m-b-10">
                    <span class="sp-w-50 m-r-10">属性名称:</span>
                    <el-input placeholder="属性名称" v-model="propertyName" />
                </el-col>
                <el-col :span="20" class="box-flex m-b-10">
                    <span class="sp-w-50 ">属性类型:</span>
                    <el-radio label="TEXT" v-model="type">纯文本</el-radio>
					<el-radio  label="URL" v-model="type">文本链接</el-radio>
					<el-radio  label="IMAGE" v-model="type">纯图片</el-radio>
					<el-radio  label="IMAGE_URL" v-model="type">图片链接</el-radio>
                </el-col>
                <el-col :span="20" class="box-flex m-b-10">
                    <span class="sp-w-50 m-r-10">所属组名:</span>
                    <el-input  placeholder="所属组名" v-model="groupName"/>
                </el-col>
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10">顺序号:</span>
					<el-input  v-model="num" type="number" placeholder="顺序号"/>
				</el-col>
                
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdmin">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    import {
        SUCCESS_REQUEST_STATUS
    } from '@/utils/config.js'
    export default {
        props: {
            leveThirdList: {
                type: Array,
                default: []
            },
			secondId: {
				type: String,
				default: ''
			}
        },
		data() {
			return {
				propertyName:'',
				type:'',
				id: '',
				groupName: '',
				num:'',
				list: [],
				centerDialogVisible: false
			}
		},
        created() {
            this.list = this.leveThirdList
        },
        methods: {
			editFn(item) {
				this.id = item.id
				this.propertyName = item.propertyName
				this.groupName = item.groupName
				this.num = item.sort
				this.type = item.propertyType
				this.centerDialogVisible = true
			},
			addCat() {
				this.centerDialogVisible = true
				this.id = this.propertyName = this.groupName = this.num = this.type = ''
			},
			saveAdmin() {
				let attr = !this.propertyName ? '请填写属性名称': !this.type ? '请选择属性类型': !this.groupName ? '请填写属性组': !this.num ? '请填写顺序号':''
				if(attr) {
					this.$message({
						type: 'error',
						message: attr
					})
					return 
				}
				this.$ajax({
					api: 'attr/save',
					params: {
						id: this.id,
						catId: this.secondId,
						propertyName: this.propertyName,
						propertyType: this.type,
						groupName: this.groupName,
						sort: this.num
					}
				}).then(res => {
                    if (res.status === SUCCESS_REQUEST_STATUS) {
                        this.$emit('handleFridLeave')
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                    }
					this.centerDialogVisible = false
                }).catch(err => {
                    this.$message({
                        type: 'error',
                        message: err.message
                    })
                })
			},
            deleteFn(item) {
				this.$confirm("删除二级品类?", "确定删除此属性", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$ajax({
						api: 'attr/delete',
						params: {
							id: item.id
						}
					}).then(res => {
						if (res.status === SUCCESS_REQUEST_STATUS) {
							this.$emit('handleFridLeave')
							this.$message({
								type: 'success',
								message: '删除成功'
							})
						}
					}).catch(err => {
						this.$message({
							type: 'error',
							message: err.message
						})
					})
                })
            }
        },
        
        watch: {
            leveThirdList(val) {
                this.list = val
            }
        }
    }
</script>
